<html ng-app="countryApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="angular/angular.js"></script>
    <script>
      var countryApp = angular.module('countryApp', []);
      countryApp.controller('CountryCtrl', ['$scope', function (scope){
        scope.countries = [
          {"name": "China", "population": 1359821000},
          {"name": "India", "population": 1205625000},
          {"name": "United States of America","population": 312247000}
        ];
        scope.sortField = 'population';
      }]);
    </script>
  </head>
  <body ng-controller="CountryCtrl">
    Search:<input ng-model="query" type="text"/>
    <table>
      <tr>
        <th><a href="" ng-click="sortField = 'name'">Country</a></th>
        <th><a href="" ng-click="sortField = 'population'">Population</a></th>
      </tr>
      <tr ng-repeat="country in countries | filter:query | orderBy:sortField">
        <td>{{country.name}}</td>
        <td>{{country.population}}</td>
      </tr>
    </table>
  </body>
</html>
